<template>
  <a-float-button
    v-if="props.presentType == 'floatButton'"
    type="primary"
    @click="openModal"
    tooltip="Create Article"
  >
    <template #icon>
      <PlusOutlined />
    </template>
  </a-float-button>

  <template v-else>
    <span @click="openModal" style="cursor: pointer">
      <slot>
        <a-button size="small" type="primary">
          <template #icon>
            <PlusOutlined />
          </template>
        </a-button>
      </slot>
    </span>
  </template>

  <a-modal
    :width="'95%'"
    v-model:open="open"
    style="top: 8px"
    title="Create Article"
    :footer="null"
    :maskClosable="false"
    destroyOnClose
  >
    <div style="text-align: right;margin-bottom:8px;"><a-tag>Article ID : {{ formState.id }}</a-tag></div>
    <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-item label="Title">
        <a-input v-model:value="formState.title" />
      </a-form-item>
      <a-form-item label="Key Words">
        <a-input v-model:value="formState.keywords" />
      </a-form-item>

      <a-form-item label="Classify">
        <a-radio-group v-model:value="formState.classify" button-style="solid">
          <a-radio-button v-for="item in classifyList" :value="item.value" :key="item.value">{{item.label}}</a-radio-button>
        </a-radio-group>
      </a-form-item>

       <a-form-item label="Tags">
          <a-select
            v-model:value="formState.tagsList"
            mode="tags"
            style="width: 100%"
            placeholder="Input Or Select Tags "
            :options="options"
            @search="handleChange"
          ></a-select>
      </a-form-item>




      <a-form-item label="Content">
        <Bytemd
          v-model:value="formState.content"
          :folderName="formState.id"
        ></Bytemd>
      </a-form-item>
      <a-form-item  label="Attach">
        <UploadAttach :relaId="formState.id" :classify="NORMAL" v-if="formState.id"></UploadAttach>
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 24 }" style="text-align: right">
        <a-popconfirm
          title="Mark sure create new article?"
          ok-text="Yes"
          cancel-text="No"
          @confirm="createNewArticle"
        >
          <a-button type="primary">Create New</a-button>
        </a-popconfirm>

        <a-button
          type="primary"
          style="margin-left: 10px"
          @click="saveOrUpdateArticle"
          >Save</a-button
        >
      </a-form-item>
    </a-form>

  </a-modal>
</template>

<script setup>
import Bytemd from "@/components/mdeditor/bytemd/Bytemd.vue";
import { PlusOutlined } from "@ant-design/icons-vue";
import { messageApi, contextHolder } from "@/utils/MessageUtils.js";
import { ref, reactive, toRaw, onMounted, watch } from "vue";
import KcHooks from "@/hooks/KcHooks.js";
import UploadAttach from '@/components/upload/UploadAttach.vue'

const props = defineProps({
  presentType: {
    type: String,
    default: "button",
  },
  articleId: {
    type: String,
    default: "",
  },
});
const open = ref(false);
const labelCol = { style: { width: "150px" } };
const wrapperCol = { span: 24 };
const formState = reactive({
  id: "",
  title: "",
  keywords: "",
  content: "",
  tagsList:[]
});

function closeModal() {
  open.value = false;
}

function openModal() {
  // console.log('=====', props.id)
  // console.log('=====', data.value)

  loadPageData()


  open.value = true;
}

const v = ref("abcde");

async function saveOrUpdateArticle() {
  console.log("=====", formState);
  const data = toRaw(formState);
  const res = await KcHooks.saveOrUpdateArticle(data);
  console.log("res:", res);
  Object.assign(formState, res.result);
  messageApi.success("Article Save Successfully");
  // closeModal()
}

onMounted(async () => {
  
    // loadPageData();
 
});

watch(
  () => props.articleId,
  async (v) => {
    // loadPageData();
  }
);


const classifyList = ref([]);
async function loadPageData() {
  if (props.articleId) {
    const res = await KcHooks.queryArticleById(props.articleId);
    Object.assign(formState, res.result);
  }
  const dicts = await KcHooks.queryDict('ARTICLE_CLASSIFY');
  classifyList.value = dicts.result;

}

function createNewArticle() {
  Object.assign(formState, {
    id: "",
    title: "",
    classify: "",
    keywords: "",
    content: "",
    tagsList:[]
  });
}


const options = ref([]) ;
async function handleChange(kw){
  const res = await KcHooks.queryArticleTags(kw);
  console.log('res:',res)
  options.value = res.result.map( item => { return {value:item.value,label:item.value}} )
}
</script>

<style>
</style>